<template>
  <el-dialog
    v-model="visible"
    :title="`用户【账号：${form.u_id} | 姓名：${form.u_name}】的角色`"
    width="1000px"
    top="3vh"
    :before-close="handleClose"
  >
    

<el-table
      :data="page.list"
      :stripe="true"
      :fit="true"
      :height="450"
      :max-height="450"
      style="width: 100%"
    >
      
      <el-table-column prop="ro_id" label="编号" />
     <el-table-column prop="ro_name" label="名称" />
      <el-table-column prop="ro_remark" label="备注" />      
      <el-table-column label="操作" width="200">
        <template #default="{row}" >
          <el-switch
          v-model="row.has"
          active-color="#13ce66"
          @change="switchRoleHas(row)"
        />
        </template>
      </el-table-column>
    </el-table>


    <el-pagination
      style="margin-top: 22px"
      layout="sizes,prev, pager, next, jumper, ->, total"
      :total="page.total"
      v-model:page-size="query.pageSize"
      v-model:current-page="query.pageNum"
      :page-sizes="[1, 3, 5, 10, 15, 20, 30, 100]"
      @current-change="getPage"
      @size-change="getPage(1)"
    />



    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
      </span>
    </template>

  </el-dialog>
</template>

<script setup >
import { reactive, ref} from "vue";
import { tip, get, post, put, del, ddo } from "@/common";

//获取角色列表数据
const query = reactive({
  pageNum: 1,
  pageSize: 5,
  u_id: ""
});
const page = ref({ total: 0 });
const getPage = (pageNo) => {
  query.pageNum = pageNo || 1;
  get("/security/user/role", query).then((result) => {
    page.value = result.data;
    query.pageNum = page.value.current;
    query.pageSize = page.value.pageSize;
  });
};





const visible = ref(false);
const open = (item) => {
  form.u_id = item.u_id;
  form.u_name = item.u_name;
  visible.value = true;

  query.u_id = form.u_id;
  getPage(1);

};


const handleClose = (done) => {
  done();
};

const form = reactive({
  u_id: "",
  u_name: "",
});


const switchRoleHas = (role) => {
  put(`/security/user/role/${form.u_id}/${role.ro_id}/${role.has===true}`,{}, {
    title: "提示",
    message: `您确定为用户【${form.u_name}】${role.has?'添加':'移除'}角色【${role.ro_name}】吗？`,
  }).then((result) => {    
    tip.success("更新成功！");
  }).catch(err=>{}).finally(()=>{
    getPage(page.value.current);
  });
};

defineExpose({ open });
</script>

<style>
.x {
}
</style>